<template>
	<!-- 关于我们 -->
	<a-row  class='introduce-bg'>  
		<a-row  class='main '>
			<a-col  :xs='24' :sm='4'>
			   <ul  class='contactnav' >
			   	<li  v-for='(item,index)  in  navdata' :key='index'  :class='{active:index==currentIndex}'   @click='chooseNav(index)'>{{item.title}}</li> 
			   </ul>
		  	</a-col>
		  	<a-col  :xs='24' :sm='20' > 
			  	<div  class='content'  v-if='currentIndex==0'>
			  		 <div  class='color-main ft24 fontWeight text-center'>{{language.about.one.title}}</div>
			  		 <a-row  class='mt28'>
			  		      <a-col :xs='24' :sm='12'  class='lh-180' >  
			  		      	<p  class='text-indent'  v-for='(item,index) in language.about.one.content' :key='index'>{{item.p}}</p> 
		
				  		  </a-col>
				  		  <a-col :xs='24' :sm='{span:8,offset:1}'  >
					  		  <img src='static/img/17_09_2.jpg' class='fl'>
					  	  </a-col>
			  		  </a-row>
			  	</div>
			  	<div  class='  content'  v-if='currentIndex==1'>
			  		 <div  class='color-main ft24 fontWeight text-center'>{{language.about.two.title}}</div>
			  		 <a-row  class='mt28'>
							<a-col  :xs='24' :sm='10' >
								<img src='static/img/company.jpg' class='fl'  width="360" alt='坤廷集团'>
							</a-col>
			  		      <a-col  :xs='24' :sm='{span:13,offset:1}'  class='lh-180' > 
			  		      		<div v-for='(item,index) in language.about.two.content' :key='index'>{{item.p}}</div>  
                          </a-col>
				  		  
			  		  </a-row> 
			  	</div>
			  	<div  class='  content' v-if='currentIndex==2'>
			  		 <div  class='color-main ft24 fontWeight text-center'>{{language.about.three.title}}</div>
			  		 <a-row  class='mt68 mb40'>
			  		       <ul>
			  		       		<li class="clear"  v-for='(item,index) in historyData' :key='index'>
			  		       			<div class="fl relative"  v-if='index%2==0' :style='{marginTop:index==0? "0":( Global.currentDevice? "155px":"0")}'>
			  		       				<span class='timeline_year' style='right: 40px;'>{{item.time}}<i style="right: -18px;transform: rotate(-60deg);"></i></span>
			  		       				<img :src='item.img' width="446"  height="220" style="padding-right: 44px;border-right:2px solid #A1AFC9">
			  		       				<div  class=' timeline_dot_bg'  style="right: -7px;"><span class='timeline_dot'><em></em></span></div>
			  		       				<p class='time_event' style="padding-right: 44px;">{{language.about.three.content[index]}}</p>
			  		       			</div>
			  		       			<div class="fr relative"  v-else  :style='{marginTop:Global.currentDevice? "155px":"0"}'>
			  		       				<span class='timeline_year' style='left: 40px;'>{{item.time}}<i  style="left: -18px;transform: rotate(60deg);"></i></span>
			  		       				<img :src='item.img' width="446"  height="220"  style="padding-left: 44px;border-left:2px solid #A1AFC9">
			  		       				<div  class=' timeline_dot_bg'  style="left: -7px;"><span class='timeline_dot'><em></em></span></div>
			  		       				<p class='time_event' style="padding-left: 44px;">{{language.about.three.content[index]}}</p>
			  		       			</div>
			  		       		</li>
			  		       </ul> 
							  
			  		  </a-row>
			  	</div>
			  	<!-- <p  class='text-indent'></p> 
			  		<p  class='text-indent'></p>
			  		<p  class='text-indent'></p> -->
			  	<!-- " -->
		
		
		  	</a-col>
	  	</a-row>
	</a-row>
</template>

<script>
export default {
	name:'aboutus_introduce',
	props:{
			language:Object
		},
	data(){
		return {   
			navdata:[
				{title:this.language.about.one.title},
				{title:this.language.about.two.title },
				{title:this.language.about.three.title },
			],
			currentIndex:0,

	        historyData: [
	          { time: '2017.11', img:'static/img/17_11_2.jpg' , event:'杭州北德中心成立：中德旅游、留学、养老投资的一站式平台 '},
	          { time: '2017.11', img:'static/img/17_11_1.jpg' , event:'盈斐客德国中心成立仪式，德方专家团队与我方领导合影留念 '},
	          { time: '2017.09', img:'static/img/17_09_2.jpg' , event:'与基尔市场部签署战略合作协议，基尔市长见证 ' },
	          { time: '2017.09', img:'static/img/17_09_1.jpg' , event:'陪同杭州市拱墅区领导赴德考察，与德国基尔市签约 ' }, 
	          { time: '2017.08', img:'static/img/17_08_1.jpg' , event:'参加中德—杭州交流合作座谈会' }, 
	          { time: '2017.07', img:'static/img/17_07_3.jpg' , event:'盈斐客受邀参观德国石荷州经济技术促进中心并与总经理鲍世邦博士合影 ' }, 
	          { time: '2017.07', img:'static/img/17_07_2.jpg' , event:'盈斐客在德国石荷州经济技术促进中心与中心领导合影 ' }, 
	          { time: '2017.07', img:'static/img/17_07_1.jpg' , event:'德国石荷州旅游局长Dr.Bunge，基尔市场部总经理Wanger先生以及石荷州经济技术促进中心中国部长Hamel先生在基尔合影  ' }, 
	          { time: '2017.06', img:'static/img/17_06_1.jpg' , event:'陪同浙江省领导赴德考察' }, 
	          { time: '2016.11', img:'static/img/16_11_1.jpg' , event:'盈斐客在杭州师范大学钱江学院设立盈斐客奖学金 ' }, 
	          { time: '2016.05', img:'static/img/16_05_1.jpg' , event:'盈斐客集团领导与德方合作伙伴在德国明斯特会谈 ' },  
	        ],

		}
	},
	created(){ 

	},
	methods:{ 
	    chooseNav(index){
	    	this.currentIndex=index 
	    },
	},
}
</script>

<style scoped="scoped">
.introduce-bg{padding: 350px 0 50px;background: url(../assets/img/about_banner.jpg) no-repeat top center;}
.main{width: 1200px;margin:0 auto;}

 /*左侧导航*/
.contactnav{background-color: #fff;}
.contactnav li{padding:14px 0;font-size: 16px;text-align: center;}
.contactnav li:hover{color: #2E4E7E;cursor: pointer;}
.contactnav li.active{background-color: #2E4E7E;color: #fff;}

.content{margin-left: 50px;vertical-align: top;min-height: 330px;padding:30px;background-color: #fff;}

.timeline_year{position: absolute;top:-52px;padding: 8px 15px;border-bottom:2px solid #2E4E7E;font-size: 24px;font-weight: 600;}
.timeline_year i{position: absolute;top:31px;width: 2px;height: 41px;background: #2E4E7E;}

.timeline_dot_bg{position: absolute;top:-8px;padding: 10px 0; background: white;}
.timeline_dot{display: inline-block; width: 16px;height: 16px;border:1px solid #2E4E7E;border-radius: 50%;}
.timeline_dot em {display: inline-block; width: 8px;height: 8px;margin:3px;background: #2E4E7E;border-radius: 50%;}
.time_event{position: absolute;width: 100%;font-size: 16px;margin-top: 12px;line-height: 1.6}

/*移动端适配*/
@media(max-width: 420px){   
	.main{width: 100%;} 
	img{width: 100%;}
	.introduce-bg{padding: 320px 0 20px;}
	.content{margin-left:0;margin-top: 20px;}
}
</style>